<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<c-header>
			<view class="header" slot="header">
				<view class="title">采购列表</view>
				<navigator  url="/package_caigou/created_step-1/created_step-1?type=add" hover-class="none" class="add-btn">采购申请</navigator> 
			</view>
		</c-header>
		<view class="h45">
			<view class="fix-wrap">
				<view class="search-area">
					<view class="search-form">
						<view class="icon iconfont f-s44">&#xe622;</view>
						<input type="text" v-model="params.keyword" class="sc-inp" @confirm="search">
						<view v-if="params.keyword" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
					</view> 
					<view class="search-page">
						<view class="btn iconfont f-s40" @click="isShowSearch=true">&#xe6e9;</view>
						<view class="mask" v-if="isShowSearch" :style="{'height': 'calc(100% - '+(systemInfo.safeArea.top+90)+'px','top':(systemInfo.safeArea.top+44)+'px'}">
							<view class="search-body a-fadeinR">
								<view class="content-wrap">
									<view class="search-grid"> 
										<view class="label">采购状态</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.status=='-1'}]" @click="params.status=-1">全部</view>
											<view :class="['item',{'active':params.status==1}]" @click="params.status=1">提出采购申请</view>
											<view :class="['item',{'active':params.status==2}]" @click="params.status=2">采购立项审批</view>
											<view :class="['item',{'active':params.status==3}]" @click="params.status=3">提交采购计划</view>
											<view :class="['item',{'active':params.status==4}]" @click="params.status=4">采购计划审批</view>
											<view :class="['item',{'active':params.status==5}]" @click="params.status=5">拟定合同</view>
											<view :class="['item',{'active':params.status==6}]" @click="params.status=6">合同审批</view>
											<view :class="['item',{'active':params.status==7}]" @click="params.status=7">采购中</view>
											<view :class="['item',{'active':params.status==8}]" @click="params.status=8">验收入库</view>
											<view :class="['item',{'active':params.status==9}]" @click="params.status=9">货款核销</view>
											<view :class="['item',{'active':params.status==10}]" @click="params.status=10">结束</view>
										</view>
									</view>	
									<view class="search-grid">
										<view class="label">申请人</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.status=='-1'}]" v-for="(item,index) in users" :key="index" @click="delfilteruser(index)">{{item.username}}<view class="iconfont f-red">&#xe724;</view></view>
											<navigator :url="'/package_msg/mailUser/mailUser?scene=8&type=2&select_data='+params.user_ids.join(',')" hover-class="none" class="item" >添加</navigator>
										</view>
									</view>		 
									<view class="search-grid">
										<view class="label">采购单位</view>
										<view class="search-content status-list company-list"> 
											<view :class="['item',{'active':item.checked}]" v-for="(item,index) in company_list" :key="index" @click="setcompanys(index)">{{item.label}}</view>										 
										</view> 
									</view>
									<view class="search-grid">
										<view class="label">紧急程度</view>
										<view class="search-content status-list">  
											<view :class="['item',{'active':params.level==item.id}]" v-for="(item,index) in level" :key="index" @click="setlevel(index)">{{item.label}}</view>										 
										</view> 
									</view>
									<view class="search-grid">
										<view class="label">类型</view>
										<view class="search-content status-list"> 
											<view :class="['item',{'active':params.type==item.id}]" v-for="(item,index) in type" :key="index" @click="settype(index)">{{item.label}}</view>										 
										</view> 
									</view>
									<view class="search-grid">
										<view class="label">采购部门</view>
										<view class="search-content status-list"> 
											<view :class="['item',{'active':item.checked}]" v-for="(item,index) in deps" :key="index" @click="setdeps(index)">{{item.name}}</view>											 
										</view> 
									</view> 
									<view class="search-grid">
										<view class="label">采购时间</view>
										<view class="search-content">
											<view class="date-bar">
												<picker mode="date" class="date" @change="changeDate(1,$event)">
													<input type="text" v-model="params.start_time" disabled placeholder="开始时间"> 
												</picker>
												<view class="line">~</view>
												<picker mode="date" class="date" @change="changeDate(2,$event)">
													<input type="text" v-model="params.end_time" disabled placeholder="结束时间"> 
												</picker>
											</view>
										</view>
									</view>
									<!-- <view class="search-grid">
										<view class="label">是否逾期</view>
										<view class="search-content">
											<view class="switch"> 
												<switch color="#3399FF" style="transform: scale(0.7);" @change="selectYq"></switch> 				 
											</view>		 
										</view>
									</view> -->
								</view>
								<view class="btn-bar">
									<view class="cancle" @click="isShowSearch=false">取消</view>
									<view class="confirm" @click="search">查询</view>
								</view>
							</view>
						</view>
					</view>
				</view> 			 
			</view>
		</view>
		<view v-if="isLogin" class="body">
			<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>
			
			<template v-else>				
				<view v-if="list.length>0" class="project-list">
					<view class="total m-b2">
						<view>共<text class="f-red f-wb">{{total}}</text>个采购</view>
						<view>合计<text class="f-red f-wb">{{total_price.toFixed(2)}}</text>元</view>
					</view>
					<!-- 超级管理员 -->
					<template>
						<view class="item m-b2" v-for="(item,index) in list" :key="index">
							<view class="hd">
								<view class="title">
									<view class="name f-s28">{{item.create_time}}</view> 
									<view class="status"> 
										<text v-if="item.status==1" class="orange">提出采购申请</text>
										<text v-if="item.status==2" class="blue">采购立项审批</text>									 
										<text v-if="item.status==3" class="blue">提交采购计划</text>
										<text v-if="item.status==4" class="blue">采购计划审批</text>
										<text v-if="item.status==5" class="blue">拟定合同</text>
										<text v-if="item.status==6" class="green">合同审批</text> 
										<text v-if="item.status==7" class="blue">采购中</text>
										<text v-if="item.status==8" class="red">验收入库</text> 	
										<text v-if="item.status==9" class="blue">货款核销</text>
										<text v-if="item.status==10" class="red">结束</text> 		
									</view>
								</view>
								<!-- <view class="date">{{item.create_time}}</view> -->
							</view> 
							<navigator :url="'/package_caigou/created_step-1/created_step-1?type=detail&id='+item.id" hover-class="none" class="content"> 
								<view class="row-2">
									<view class="s-item">
										<view class="label">采购单号：</view>
										<view class="val">{{item.procure_num||''}}</view>
									</view>
									<view class="s-item"> 
										<view class="val"> 
											<text>{{item.type_name}}</text>
											<text>[{{item.level_name}}]</text> 
										</view>
									</view>
								</view>
								<view class="row-2">
									<view class="s-item">
										<view class="label">申请人：</view>
										<view class="val">{{item.username||''}}</view>
									</view>
									<view class="s-item">
										<view class="label">申请部门：</view>
										<view class="val">{{item.dep_name||''}}</view>
									</view>
								</view>
								<view class="row-2">
									<view class="s-item">
										<view class="label">采购单位：</view>
										<view class="val">{{item.company_name}}</view>
									</view> 
									<view class="s-item">
										<view class="label"></view>
										<view class="val f-red f-wb">￥{{item.total_price}}</view>
									</view> 
								</view> 												 
							</navigator>
							<view class="bottom">
								<view class="left">									 
									
								</view>
								<view v-if="item.user_id==userInfo.id && (item.status==1 || ( item.status==2&&item.is_agree!=1))" class="right">									 		
									<view class="btn red" @click="del(item.id)">删除</view>
									<navigator :url="'/package_caigou/created_step-1/created_step-1?type=edit&id='+item.id" hover-class="none" class="btn orange" >修改</navigator>									 
								</view>
							</view> 
						</view>
					</template>
					
					<c-loading :loadingState="loadingState"></c-loading>
				</view>
				
				<c-empty v-else></c-empty>
			</template>
			 
		</view>
		
		<c-nav-caigou :switchTab="3"></c-nav-caigou>
		 
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				userInfo:uni.getStorageSync('userInfo'),
				systemInfo:getApp().globalData.systemInfo,
				isIphoneX:getApp().globalData.isIphoneX,
				loadingState:{
					default:true,
					loading:false,
					completed:false
				},
				list:[],
				total:0,
				total_price:0,
				type:'-1',
				isShowSearch:false,
				currentIndex:'',
				params:{ 
					keyword: '',
					status: '-1',
					start_time:'',
					end_time:'',
					username:'',
					user_id:'' ,
					companys:[],
					user_ids:[],
					dep_ids:[],
					page:1,
					limit:15,
					type:'0',
					level:'0'
				},
				level:[
					{
						label: '全部', 
						id: 0 
					}, 
					{
						label: '一般', 
						id: 1 
					}, 
					{
						label: '重要',
						id: 2
					},
					{
						label: '紧急',
						id: 3
					}
				],
				type:[
					{
						label: '全部', 
						id: 0 
					},
					{
						label: '实物类', 
						id: 1 
					}, 
					{
						label: '服务类',
						id: 2
					} 
				],
				warn_level:'',
				flag:{
					isFullPage:false,
					isSetDate:false
				},
				setDate:{
					project:{}, 
					new_end_time:'',
					content:''
				},
				isStop:true,
				roleList:[],
				report_user_list:[],
				company_list:[],
				users:[],
				deps:[]
			}
		},
		async onLoad(params) { 
			this.isLogin=await this.$loginState('check');  
			 
			if(this.isLogin){ 
				this.getList();  
				this.companylistsel();
				this.departmentlistsel();
				this.procuredetailstat();
			}
		},
		onShow() {
			 
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				if(this.list.length<this.total&&this.list.length>0){
					this.params.page++; 
					this.getList(); 
				} 
			}	 
		},
		methods: {
			setlevel(idx){
				let item=this.level[idx];
				this.params.level=item.id;
				
			},
			settype(idx){
				let item=this.type[idx];
				this.params.type=item.id;
			},
			async procuredetailstat(){
				let {keyword,companys,status,start_time,end_time,user_ids,dep_ids,page,limit}=this.params;
				
			},
			delfilteruser(idx){
				this.params.user_ids.splice(idx,1);
				this.users.splice(idx,1);
			},
			async companylistsel(){ 
				let res=await this.$api.user_api.companylistsel({
					group_id:1
				})
				if(res.data.code==200){
					res.data.data.forEach(item=>{
						item.checked=false;
					})
					this.company_list=res.data.data; 
				}
			},
			async departmentlistsel(){
				let res=await this.$api.user_api.departmentlistsel(); 
				if(res.data.code==200){
					res.data.data.forEach(item=>{
						item.checked=false;
					})
					this.deps=res.data.data; 
					console.log(this.deps)
				}
			},
			
			setcompanys(idx){
				let item=this.company_list[idx];
				if(this.params.companys.indexOf(item.value)==-1){
					this.params.companys.push(item.value);
					item.checked=true;
				}else{
					let index=this.params.companys.indexOf(item.value);
					this.params.companys.splice(index,1);
					item.checked=false;
				} 
			},
			
			setdeps(idx){
				let item=this.deps[idx];
				if(this.params.dep_ids.indexOf(item.id)==-1){
					this.params.dep_ids.push(item.id);
					item.checked=true;
				}else{
					let index=this.params.dep_ids.indexOf(item.id);
					this.params.dep_ids.splice(index,1);
					item.checked=false;
				} 
			},
			
			// 选择日期
			changeDate(type,e){
				// type 1 开始时间  2 结束时间 
				if(type==1){
					this.params.start_time=e.target.value;
				}
				if(type==2){
					this.params.end_time=e.target.value;
				}
			}, 
			
			// 切换类型
			changeType(type){
				this.params.status=type;
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.list=[];
				this.params.page=1;
				this.getList();
			},
			 
			// 筛选逾期项目
			selectYq(e){ 
			},
			
			async getList() {  
				let {keyword,companys,status,start_time,end_time,user_ids,dep_ids,page,limit,type,level}=this.params;
				let res = await this.$api.user_api.procureList({
					keyword, 
					status,
					start_time,
					end_time,
					dep_ids:dep_ids.join(','),
					user_ids:user_ids.join(','),
					company_val:companys.join(','),
					page,
					limit,
					procure_type:type,
					procure_level:level
					
				});     
				if (res.data.code == 200) { 
					this.loadingState.default=false;					 
					this.total = res.data.data.count; 
					this.list =this.list.concat(res.data.data.list);  
					if(this.list.length<res.data.data.count){
						// this.loadingState.loading=true;
					}else{
						// this.loadingState.loading=false;
						this.loadingState.completed=true;
					}
					let total_price=await this.$api.user_api.procuredetailstat({
						keyword,
						status,
						start_time,
						end_time,
						dep_ids:dep_ids.join(','),
						user_ids:user_ids.join(','),
						company_val:companys.join(','),
						procure_type:type,
						procure_level:level
					}); 
					if(total_price.data.code==200){
						this.total_price=total_price.data.data.total_price; 
					}
					
				} else {
					this.loading = false;
					uni.showToast({
						icon:'error',
						title:res.data.msg,
						mask:true
					})
				} 				
			},
		
			 
			
			// 搜索关键词
			search() {
				this.isShowSearch=false;
				this.list = [];
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.params.page=1;
				this.getList();
			},
			
			// 清空关键词
			clearKeyword() {
				this.params.project_name = '';
				this.params.page=1;
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.list = [];
				this.getList();
			},
			
			// 打开弹窗
			showPopup(t, n) { 
				if (t == 'show') {
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},
			 
			async del(id){
				let res=await this.$api.user_api.procuredetailDel({
					id:id
				}) 
				console.log(res,{
					id:id
				})
				if(res.data.code==200){
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					};
					this.list = [];
					this.getList();
				}
			} 
		
		},
		computed:{
			filter_user(){
				return this.$store.state.caigou_user_list
			},
			list_update(){
				return this.$store.state.caigou_list
			} 
		},
		watch:{
			list_update(newer,older){  
				if(newer!=older){ 
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					};
					this.params.page=1;
					this.list=[];
					this.getList(); 
				}
			},
			filter_user(newer,older){
				if(newer!=older){ 
					if (newer.length > 0) {
						let new_data = [];
						this.users = newer;
						this.users.forEach(item => {
							new_data.push(item.id)
						})
						this.params.user_ids = new_data;
					} else {
						this.users = [];
						this.params.user_ids = [];
					}  
				}
			}
			 
		}
		
	}
</script>

<style lang="less">
	.total{
		margin:0 30rpx 0;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.project-list{
		padding-top:20rpx;
		.item{
			padding:0 20rpx;
			margin: 0 30rpx;
			background: #fff;
			border-top: 5rpx solid #09f;
			border-radius: 15rpx;
			.hd{
				padding:15rpx 0;
				border-bottom: 1rpx solid #eee;		
			}
			.date{
				color:#999;
				font-size: 24rpx;
			}
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;						
				.name{
					margin-right: 10rpx;
					font-size: 30rpx;
				}
				.status{
					flex-shrink: 0;
					text{
						border-radius: 5rpx;
						padding:2rpx 5rpx;
					}
				}
				.blue{
					border:1rpx solid #09f;
					color:#09f;
				}
				.red{
					border:1rpx solid #f00;
					color:#f00;
				}
				.grey{
					border:1rpx solid #ccc;
					color:#ccc;
				}
				.orange{
					border:1rpx solid #ff9600;
					color:#ff9600;
				}
				.green{
					border:1rpx solid green;
					color:green;
				}
			}
			.content{
				position: relative;
				padding:20rpx 0 0;
				.finish-icon{
					position: absolute;
					right:0;
					top:0;
					width:180rpx;
					image{
						width: 100%;
					}
				}
				.row-2{
					display: flex;
					justify-content: space-between;
				}
				.s-item{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					font-size: 26rpx;
					color:#666;
					.label{
						width: 130rpx;
						flex-shrink: 0;
					}
					.val{
						display: flex;
						align-items: center;
						flex-grow: 2;
					}
				}
				.progress{
					position: relative;
					height:10rpx;
					width: 60%;
					margin-right: 20rpx;
					border-radius: 15rpx;
					background: #ccc;
					.kd{
						position: absolute;
						left:0;
						top:0;
						height:10rpx;
						border-radius: 15rpx;
						background: #09f;
					}
				}
				.progress-data{
					font-size: 28rpx;
				}				
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				// padding:20rpx 0;
				margin-top: 10rpx;
				border-top: 1rpx solid #eee;
				.left{
					display: flex;
					.btn{
						margin-right: 20rpx;
					}
				}
				.right{
					display: flex;
					justify-content: flex-end;
					.btn{
						margin-left: 20rpx; 
					}
				}
				.btn{ 
					padding:0 10rpx;
					margin: 20rpx 0;
					border-radius: 10rpx;
					font-size: 28rpx;
					color:#fff;
				}
				.blue{
					background:#09f; 
				}
				.red{
					background:#f00; 
				}
				.grey{
					background:#ccc; 
				}
				.yello{
					background:#00ff00;
				}
				.green{
					background:#00aa00;
				}
				.orange{
					background: #ff9600;
				}
			}
		}
	} 
	.add-btn{ 
		position: absolute;
		right:10px;
		top:11px; 
		height:20px;
		line-height: 20px;
		padding:0 5px;
		text-align: center;  
		border: 1rpx solid #09f;
		border-radius: 10rpx;
		color:#09f;
		font-size: 12px; 
	}
	.search-grid{ 
		padding:20rpx;
		.label{
			margin-bottom: 20rpx;
			font-size: 26rpx;
			font-weight: bold;
		}
	}
	.date-bar{
		display: flex;
		align-items: center;
		.date{
			border: 1rpx solid #eee;
			border-radius: 10rpx; 					
			input{
				height: 50rpx;
				line-height: 50rpx;	
				padding:0 10rpx;
				font-size: 24rpx;
			}
		}
		.line{
			margin: 0 20rpx;
		}
	}
	.status-list{
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		.item{
			position: relative;
			width: 31%;
			padding:10rpx 0;
			margin-bottom: 20rpx;
			margin-right: 10rpx;
			text-align: center;
			background: #f5f5f5;
			border-radius: 38rpx;
			font-size: 24rpx;
			.iconfont{
				position: absolute;
				right: -10rpx;
				top:-10rpx;
			}
		}
		.active{
			background: #09f;
			color:#fff;
			font-weight: bold;
		}
	}
	.company-list{
		display: block;
		.item{
			width: 100%;
		}
	}
</style>
